<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box .small-box{
            float:left;
            width:100px;
            height:100px;

        }
        .box .black{
            background-color: black;
        }
    </style>
</head>
<body>
<div class = "box">

</div>
 <script>
/*



*/
//表示 n 就是 盒子的大小
//假设：每个盒子大小是 100px 颜色交错
//初始化
let n = 9
let box = document.querySelector(".box")
//设置整体棋盘的大小
box.style.width = n*100 + "px"//大盒子的宽
box.style.height = n*100 + "px"//大盒子的高

let isEven = n => n % 2 === 0 

let str = ""
//i代表第几行
for(let i = 0;i < n;i++){//外层循环每一行

    //j代表每行第几个
    for(let j = 0;j < n;j++){//内层循环每一行中的每一个
        
        //任何两个相邻的棋盘的颜色不同 (i+j)的奇偶性 判断单双颜色
        if(isEven(i+j)){

            //给每行添加小盒子的样式 小盒子在前面已经设置好了样式
            str += `<div class = "small-box black"></div>`
        }else{
            str += `<div class = "small-box"></div>`
        }
        
    }
}
box.innerHTML = str


 </script>   
</body>
</html>